<template>
  <div class="transport-tab">
    <div class="tab-center">
      <el-row :gutter="20">
        <el-col
          :span="6"
          v-for="(tab, index) in transportTabs"
          :key="index"
          @click.native="switchTab(tab)"
        >
          <span :class="{active: activeTab === tab.path}">{{ tab.title }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script >
export default {

  data() {
    return {
      loading: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      banner_box: {},
      activeTab: '/transport/rail', // 默认选中铁路货运
      serviceInfo: {},
      transportTabs: [
        { title: this.$t('navDetails.railwayFreight'), path: '/transport/rail' },
        { title: this.$t('navDetails.maritimeTransportation'), path: '/transport/sea' },
        { title: this.$t('navDetails.airTransportation'), path: '/transport/air' },
        { title: this.$t('navDetails.internationalRoadTransportation'), path: '/transport/road' }
      ],

    }
  },
  computed: {

  },
  async created() {
    // 设置当前激活的tab
    this.activeTab = this.$route.path;
  },
  watch: {
    '$route'(to) {
      // 路由变化时更新激活状态
      this.activeTab = to.path;
    }
  },
  methods: {
    switchTab(tab) {
      this.activeTab = tab.path;
      this.$router.push(tab.path);
    }
  }
}
</script>
<style scoped lang="scss">
.transport-tab {
  width: 100vw;
  height: auto; /* 自动高度 */
  background-color: #f6f8fb;
  border-bottom: 1px solid #d2d2d2;

  .tab-center {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* 添加左右内边距 */
    box-sizing: border-box;

    .el-row {
      display: flex;
      flex-wrap: wrap; /* 允许换行 */
      height: auto; /* 自动高度 */

      .el-col {
        flex: 0 0 25%; /* 默认每列占25%宽度 */
        height: auto; /* 自动高度 */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        padding: 15px 0; /* 添加上下内边距 */
        box-sizing: border-box;

        span {
          font-size: 16px; /* 默认字体大小 */
          font-weight: 500;
          color: #333;
          padding: 10px 0;
          transition: all 0.3s;
          width: 100%;
          text-align: center;
          white-space: normal; /* 允许换行 */
          overflow: hidden; /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 溢出显示省略号 */
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 限制显示行数 */
          -webkit-box-orient: vertical;

          &.active {
            color: #fe3231;
            font-weight: bold;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              width: 160px;
              height: 3px;
              background-color: #fe3231;
            }
          }
        }

        &:hover span:not(.active) {
          color: #fe3231;
        }
      }
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .transport-tab {
    .tab-center {
      padding: 0;
      .el-row {
        .el-col {
          flex: 0 0 50%; /* 小屏幕上每行显示2个项目 */
          padding: 10px 0; /* 调整内边距 */
          span {
            font-size: 14px; /* 调整字体大小 */
          }
          span::after {
            width: 120px; /* 调整活动指示器的宽度 */
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .transport-tab {
    .tab-center {
      .el-row {
        .el-col {
          flex: 0 0 50%; /* 更小屏幕上每行显示1个项目 */
          padding: 8px 0; /* 调整内边距 */
          span {
            font-size: 12px; /* 调整字体大小 */
          }
          span::after {
            width: 80px; /* 调整活动指示器的宽度 */
          }
        }
      }
    }
  }
}
</style>
